﻿@model List<DHQGHN.PM2.Models.InvestigationStatisticsModel>

@*<script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/canvasjs.min.js"></script>*@
<script type="text/javascript" src="~/Scripts/Chart.js"></script>

<script>
    var color = {
        Transparent: "rgba(255,255,255,0)",
        Completed: "rgba(220,220,220,0.5)",
        Stroke_Completed: "rgba(220,220,220,0.8)",
        Waiting: "rgba(151,187,205,0.5)",
        Stroke_Waiting: "rgba(151,187,205,0.8)",
        HighLightFill_Completed: "rgba(220,220,220,0.75)",
        HighLightStroke_Completed: "rgba(220,220,220,1)",
        HighLightFill_Waiting: "rgba(220,220,220,0.75)",
        HighLightStroke_Waiting: "rgba(220,220,220,1)",
        getTransparentColor : function () {
            this.Completed = this.Transparent;
            this.Stroke_Completed = this.Transparent;
            this.Waiting = this.Transparent;
            this.Stroke_Waiting = this.Transparent;
            this.HighLightFill_Completed = this.Transparent;
            this.HighLightStroke_Completed = this.Transparent;
            this.HighLightFill_Waiting = this.Transparent;
            this.HighLightStroke_Waiting = this.Transparent;
        },
        getFillColor : function () {
            this.Completed = "rgba(220,220,220,0.5)";
            this.Stroke_Completed = "rgba(220,220,220,0.8)";
            this.Waiting = "rgba(151,187,205,0.5)";
            this.Stroke_Waiting = "rgba(151,187,205,0.8)";
            this.HighLightFill_Completed = "rgba(220,220,220,0.75)";
            this.HighLightStroke_Completed = "rgba(220,220,220,1)";
            this.HighLightFill_Waiting = "rgba(151,187,205,0.75)";
            this.HighLightStroke_Waiting = "rgba(151,187,205,1)";
        }
    };
    
    $(document).ready(function () {
        setGlobalOption();
        drawChart();
        drawNote();
    });

    function setGlobalOption() {
        Chart.defaults.global.responsive = true;
        Chart.defaults.global.scaleLineColor = "rgba(102,80,150,.5)";
        Chart.defaults.global.scaleFontColor = "black";
    }

    function drawChart() {
        var barChartData = getBarChartData();
        var ctx = document.getElementById("canvas").getContext("2d");
        var painter = new Chart(ctx);
        painter.Bar(barChartData, {
            //Number - Pixel width of the bar stroke
            barStrokeWidth: 2,
            //Number - Spacing between each of the X value sets
            barValueSpacing: 25,
            //Number - Spacing between data sets within X values
            barDatasetSpacing: 3,
            scaleGridLineColor: "rgba(102,80,150,.5)"
        });
    }

    function removeTooltipEvents()
    {
        Chart.defaults.global.showTooltips = false;        
    }

    function getBarChartData() {        
        var dataInfo = getData();              
        
        if (isZeroAll(dataInfo.COMPLETED, dataInfo.WAITING)) {
            var len = dataInfo.COMPLETED.length;
            dataInfo.COMPLETED.length = 0;
            dataInfo.WAITING.length = 0;
            var defaultValue = 20;
            for (var i = 0; i < len; i++) {
                dataInfo.COMPLETED.push(defaultValue);
                dataInfo.WAITING.push(defaultValue);
            }
            color.getTransparentColor();           
            removeTooltipEvents();
        }
        else color.getFillColor();
        //alert(dataInfo.TITLE);
        var barChartData = {
            labels: dataInfo.TITLE,
            datasets: [
                {//da hoan thanh
                    fillColor: color.Completed,
                    strokeColor: color.Stroke_Completed,
                    highlightFill: color.HighLightFill_Completed,
                    highlightStroke: color.HighLightStroke_Completed,                   
                    data: dataInfo.COMPLETED                    
                },
                {// chua hoan thanh
                    fillColor: color.Waiting,
                    strokeColor: color.Stroke_Waiting,
                    highlightFill: color.HighLightFill_Waiting,
                    highlightStroke: color.HighLightStroke_Waiting,
                    data: dataInfo.WAITING                    
                }
            ]
        }
        
        return barChartData;
    }

    function isZeroAll(completed, waiting) {
        var result = 0;
        for (var i = 0; i < completed.length;i++){
            result += completed[i] + waiting[i];
        }

        if (result == 0) {
            return true;
        }

        return false;
    }

    function maxValueOf(completed, waiting) {
        var val1 = findMax(completed);
        var val2 = findMax(waiting);
        var max = 0;
        if (val1 < val2) {
            max = val2;
        }
        else if (val1 > val2) {
            max = val1;
        } else {
            max = val1;
        }

        return max;
    }

    function findMax(vals) {
        if (vals.length == 0) {
            return 0;
        }
        var max = vals[0];
        for (var i = 0; i < vals.length; i++) {
            if (max < vals[i]) {
                max = vals[i];
            }
        }

        return max;
    }

    function getData() {
        var completed = new Array();
        var title = new Array();
        var waiting = new Array();
        var model = '@Html.Raw(Json.Encode(Model))';
        var obj = JSON.parse(model);
        //alert(model);
        //STT":1,"METHOD_NAME":"Điều tra Online","TOTAL":0,"COMPLETED":0,"WAITING":0
        for (var i = 0; i < obj.length; i++) {

            if (obj[i].METHOD_ID == '01') {
                title.push("ĐT Online");
            }
            else if (obj[i].METHOD_ID == '02') {
                title.push("ĐT Tablet");
            }
            else if (obj[i].METHOD_ID == '03') {
                title.push("ĐT Giấy");
            }

            waiting.push(obj[i].WAITING);
            completed.push(obj[i].COMPLETED);            
        }

        //Neu du lieu < 3, tao bo du lieu gia;
        //nham du cot khong qua lon
        var maxElement = 3;
        if (maxElement - obj.length > 0) {
            var len = maxElement - obj.length;
            for (var j = 0; j < len; j++) {                
                title.push("");
            }
        }

        return {
            COMPLETED: completed,
            WAITING: waiting,
            TITLE: title
        }
    }

    function drawNote() {
        var c = document.getElementById("canvas_remark");
        var ctx = c.getContext("2d");
        var x = 50;
        var y = 1;
        var spaceFromRect = 5;
        var wRect = 20;
        var hRect = 20;
        ctx.font = "13px Arial";
        var text = "Đã hoàn thành";
        color.getFillColor();
        drawRectangle(ctx, x, y, wRect, hRect, color.Completed);//hoan thanh
        drawText(ctx, text, x + wRect + spaceFromRect, y + 15, "black");
        x = x + wRect + getLength(ctx,text) + 30;
        drawRectangle(ctx, x, y, wRect, hRect, color.Waiting); //chua hoan thanh
        text = "Chưa hoàn thành";
        drawText(ctx, text, x + wRect + spaceFromRect, y + 15, "black");
        x = x + wRect + getLength(ctx, text) + 30;
        drawText(ctx, "Đơn vị: Hộ GĐ", x  + spaceFromRect, y + 15, "black");
    }

    function drawRectangle(ctx, x, y, w, h,color)
    {
        ctx.fillStyle = color;
        ctx.fillRect(x, y, w, h);
        //ctx.strokeRect(x, y, w, h);        
    }

    function drawText(ctx, text, x, y, color) {
        ctx.fillStyle = color;
        ctx.fillText(text, x, y);
        //ctx.strokeRect(x + 25, y, length, h);
    }

    function getLength(ctx, text) {
        var length = ctx.measureText(text).width;
        return length;
    }

    function getHeight(ctx, text) {
        var h = ctx.measureText(text).height;
        return h;
    }

    function globalOption() {
        Chart.defaults.global = {
            // Boolean - Whether to animate the chart
            animation: true,

            // Number - Number of animation steps
            animationSteps: 60,

            // String - Animation easing effect
            // Possible effects are:
            // [easeInOutQuart, linear, easeOutBounce, easeInBack, easeInOutQuad,
            //  easeOutQuart, easeOutQuad, easeInOutBounce, easeOutSine, easeInOutCubic,
            //  easeInExpo, easeInOutBack, easeInCirc, easeInOutElastic, easeOutBack,
            //  easeInQuad, easeInOutExpo, easeInQuart, easeOutQuint, easeInOutCirc,
            //  easeInSine, easeOutExpo, easeOutCirc, easeOutCubic, easeInQuint,
            //  easeInElastic, easeInOutSine, easeInOutQuint, easeInBounce,
            //  easeOutElastic, easeInCubic]
            animationEasing: "easeOutQuart",

            // Boolean - If we should show the scale at all
            showScale: true,

            // Boolean - If we want to override with a hard coded scale
            scaleOverride: false,

            // ** Required if scaleOverride is true **
            // Number - The number of steps in a hard coded scale
            scaleSteps: null,
            // Number - The value jump in the hard coded scale
            scaleStepWidth: null,
            // Number - The scale starting value
            scaleStartValue: null,

            // String - Colour of the scale line
            scaleLineColor: "rgba(0,0,0,.1)",

            // Number - Pixel width of the scale line
            scaleLineWidth: 1,

            // Boolean - Whether to show labels on the scale
            scaleShowLabels: true,

            // Interpolated JS string - can access value
            scaleLabel: "<%=value%>",

            // Boolean - Whether the scale should stick to integers, not floats even if drawing space is there
            scaleIntegersOnly: true,

            // Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
            scaleBeginAtZero: false,

            // String - Scale label font declaration for the scale label
            scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

            // Number - Scale label font size in pixels
            scaleFontSize: 12,

            // String - Scale label font weight style
            scaleFontStyle: "normal",

            // String - Scale label font colour
            scaleFontColor: "#666",

            // Boolean - whether or not the chart should be responsive and resize when the browser does.
            responsive: false,

            // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
            maintainAspectRatio: true,

            // Boolean - Determines whether to draw tooltips on the canvas or not
            showTooltips: true,

            // Function - Determines whether to execute the customTooltips function instead of drawing the built in tooltips (See [Advanced - External Tooltips](#advanced-usage-custom-tooltips))
            customTooltips: false,

            // Array - Array of string names to attach tooltip events
            tooltipEvents: ["mousemove", "touchstart", "touchmove"],

            // String - Tooltip background colour
            tooltipFillColor: "rgba(0,0,0,0.8)",

            // String - Tooltip label font declaration for the scale label
            tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

            // Number - Tooltip label font size in pixels
            tooltipFontSize: 14,

            // String - Tooltip font weight style
            tooltipFontStyle: "normal",

            // String - Tooltip label font colour
            tooltipFontColor: "#fff",

            // String - Tooltip title font declaration for the scale label
            tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

            // Number - Tooltip title font size in pixels
            tooltipTitleFontSize: 14,

            // String - Tooltip title font weight style
            tooltipTitleFontStyle: "bold",

            // String - Tooltip title font colour
            tooltipTitleFontColor: "#fff",

            // Number - pixel width of padding around tooltip text
            tooltipYPadding: 6,

            // Number - pixel width of padding around tooltip text
            tooltipXPadding: 6,

            // Number - Size of the caret on the tooltip
            tooltipCaretSize: 8,

            // Number - Pixel radius of the tooltip border
            tooltipCornerRadius: 6,

            // Number - Pixel offset from point x to tooltip edge
            tooltipXOffset: 10,

            // String - Template string for single tooltips
            tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",

            // String - Template string for multiple tooltips
            multiTooltipTemplate: "<%= value %>",

            // Function - Will fire on animation progression.
            onAnimationProgress: function () { },

            // Function - Will fire on animation completion.
            onAnimationComplete: function () { }
        }


    }

    function barOption() {

        return {
            //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
            scaleBeginAtZero: true,

            //Boolean - Whether grid lines are shown across the chart
            scaleShowGridLines: true,

            //String - Colour of the grid lines
            scaleGridLineColor: "rgba(0,0,0,.05)",

            //Number - Width of the grid lines
            scaleGridLineWidth: 1,

            //Boolean - Whether to show horizontal lines (except X axis)
            scaleShowHorizontalLines: true,

            //Boolean - Whether to show vertical lines (except Y axis)
            scaleShowVerticalLines: true,

            //Boolean - If there is a stroke on each bar
            barShowStroke: true,

            //Number - Pixel width of the bar stroke
            barStrokeWidth: 2,

            //Number - Spacing between each of the X value sets
            barValueSpacing: 25,

            //Number - Spacing between data sets within X values
            barDatasetSpacing: 3,

            //String - A legend template
            legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"

        };
    }
</script>
<div class="row">
    <div class="col-md-6">
        @Html.Partial("StatisticsResult", Model)
    </div>
    <div class="col-md-6" style=" margin-top:10px;">
        <div id="chartContainer" style="height: 410px; width: 100%; margin: 0 auto;">
            <canvas id="canvas_remark" height="22" width="500" style=""></canvas>
            <canvas id="canvas" height="300" width="500" style=""></canvas>
        </div>
    </div>   
</div>

